<template>
  <div style="width: 100%;height: 100%; display: flex;flex-direction: column;padding: 10px;">
    <div style="flex: 1;overflow: auto;">
      <router-view></router-view>
    </div>
    <div style="background-color: #F2F8E9;display: flex;justify-content: space-around;">
      <div 
        v-for="item in tabs"
        :key="item.value"
        style="display: flex;flex-direction: column;align-items: center;"
        @click="changeTab(item.value)"
        >
        <img :src="currentTab === item.value ? item.sel : item.unsel" style="width: 20px;">
        <span>{{ item.label }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import tab_home_select from '../assets/xiangmujindu/tab_home_select.png'
import tab_houme_unselected from '../assets/xiangmujindu/tab_houme_unselected.png'
import tab_my_select from '../assets/xiangmujindu/tab_my_select.png'
import tab_my_unselected from '../assets/xiangmujindu/tab_my_unselected.png'
export default {
  name: 'Index',
  data () {
    return {
      currentTab: 'index',
      tabs: [
        {
          label: '首页',
          value: 'index',
          sel: tab_home_select,
          unsel: tab_houme_unselected
        },
        {
          label: '我的',
          value: 'my',
          sel: tab_my_select,
          unsel: tab_my_unselected
        }
      ]
    }
  },
  methods: {
    changeTab (value) {
      this.currentTab = value
      this.$router.replace({ path: '/' + value })
    }
  }
}
</script>